<template>
  <div>
    <el-dialog :close-on-click-modal="false" title="请选择预收单" :visible.sync="visible" width="720px" @closed="closedModal">
      <div class="filter-container">
        <el-date-picker v-model="listQuery.queryParam.date1" :editable="false" type="date" placeholder="开始日期" style="width:130px" size="small" :clearable="false" value-format="yyyy-MM-dd" />
        <span class="zhi">至</span>
        <el-date-picker v-model="listQuery.queryParam.date2" :editable="false" type="date" placeholder="结束日期" style="width:130px" size="small" :clearable="false" value-format="yyyy-MM-dd" />
        <el-input v-model="listQuery.queryParam.billNo" size="small" placeholder="单据号" style="width: 120px;" />
        <custList ctr-type="list" @selectChange="selectChange" />
        <el-button size="mini" type="primary" @click="getList">查询</el-button>
      </div>
      <el-table :key="tableKey" v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%;" size="small">
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="单据日期" align="center" width="100">
          <template slot-scope="{row}">
            <span>{{ row.billDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单据号" width="100">
          <template slot-scope="{row}">
            <span>{{ row.billNo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户">
          <template slot-scope="{row}">
            <span>{{ row.custName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预收类型" align="center">
          <template slot-scope="{row}">
            <span>{{ row.presaleType==0?'按钱':row.presaleType==1?'按商品':'按品类' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="金额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.beginBalance|Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="余额" align="right">
          <template slot-scope="{row}">
            <span>{{ row.balance|Fixed }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleSelect(row.id)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>10" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageNum" @pagination="getList" />
    </el-dialog>
  </div>
</template>
<script>
import { getPresale } from '@/api/store'
import Pagination from '@/components/Pagination'
import custList from '@/components/selects/custList'
import { getNowDate } from '@/utils/auth'
export default {
  components: { Pagination, custList },
  filters: {
    Fixed: function(num) {
      if (!num) { return '0.00' }
      return parseFloat(num).toFixed(2)
    }
  },
  props: ['modalTableVisible'],
  data() {
    return {
      tableKey: 0,
      visible: false,
      tableData: [],
      total: 0,
      isBillDate: '0',
      listLoading: true,
      listQuery: {
        pageIndex: 1,
        pageNum: 10,
        queryParam: {
          date1: getNowDate(),
          date2: getNowDate(),
          nonZeroBalance: '1',
          billNo: '',
          custId: ''
        }
      }
    }
  },
  watch: {
    'modalTableVisible'(val) {
      this.visible = val
      if (val) {
        this.getList()
      }
    }
  },
  methods: {
    closedModal() {
      this.$parent.modalTableVisible = false
    },
    getList() {
      this.listLoading = true
      getPresale(this.listQuery).then(res => {
        this.listLoading = false
        this.tableData = res.data.data
        this.total = res.data.totalNum
      }).catch(() => {
        this.listLoading = false
      })
    },
    selectChange(obj) {
      for (var key in obj) {
        this.listQuery.queryParam[key] = obj[key]
      }
    },
    handleSelect(id) {
      this.$parent.modalTableVisible = false
      this.$parent.initTableData(id)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog .el-dialog__body {
    min-height: 240px;
    max-height: 570px;
    padding-top: 10px !important
}
</style>
